let $ = layui.$;
export default class Manage {
    constructor(next) {
        this.render()
        this.handel(next)
    }
    render() {
        let template = `
        <style>
          #content{
            position: relative;
            padding:0;
          }
          #headline{
            position: absolute;
            top:150px;
            left:100px;
            color:#c2c2c2;
            font-size:50px ;
          }
        </style>

        <div class="layui-layout layui-layout-admin">
            <div class="layui-header">
                <div class="layui-logo">猫眼后台管理系统</div>
                <ul class="layui-nav layui-layout-right" >
                    <li class="layui-nav-item">
                        <a href="javascript:;" id="dropdown">
                        </a>
                    </li>
                    <li class="layui-nav-item"><a id="SignOut">Sign out</a></li>
                </ul>
            </div>
            <div class="layui-side layui-bg-black">
                <div class="layui-side-scroll">
                    <ul class="layui-nav layui-nav-tree" lay-filter="studentNav">
                        <li class="layui-nav-item">
                            <a href="#manage/users">用户管理</a>
                        </li>
                        <li class="layui-nav-item">
                            <a href="#manage/films">电影管理</a>
                        </li>
                        <li class="layui-nav-item">
                            <a href="#manage/cinemas">院线管理</a>
                        </li>
                        <li class="layui-nav-item">
                            <a href="#manage/theater">电影院线匹配管理</a>
                        </li>

                        <!-- 路径待写入 -->
                        <li class="layui-nav-item">
                            <a href="#manage/hitMovies">热映电影管理</a>
                        </li>
                        <li class="layui-nav-item">
                            <a href="#manage/comingSoon">即将上映管理</a>
                        </li>
                        <li class="layui-nav-item">
                            <a href="#manage/hotBroadcast">热播影视管理</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="layui-body" id="content" style="padding:15px"></div>
            <div class="layui-footer">
                <span>开发人员：欧云龙  阴文喻 赵雪萍 张恒恒 谢佳禾 张林</span>
            </div>
        </div>
        
        `
        $('#root').html(template)
    };
    handel(next) {
        if (location.hash == '#manage') {
            let str = `
            <img src="https://goss.cfp.cn/creative/vcg/800/new/VCG211201856376.jpg" alt="" style="width: 100%">
            <h1 id="headline">欢迎你来到猫眼后台管理系统</h1>`
            $('#content').html(str)
        } else {
            $('#content').html('')
        }
        $('#content').css({
            width: innerWidth - 220 + "px"
        })
        //状态管控
        //通过向服务器传递token信息，得到解密后的内容
        $.ajax({
            type: 'get',
            url: "/api/getToken",

            success(res) {
                // console.log(res);
                if (Object.keys(res).length <= 0) {
                    window.location = '#admin';
                } else {
                    let str = `
                    <img src="./images/7dd82a16316ab32c8359debdb04396ef2897.png"
                        class="layui-nav-img" id="userImg">
                    <span id="userName">${res.user[0].username}</span>
                    `
                    $('#dropdown').html(str)
                    next();
                }
            },
            error() {
                window.location = '#admin';
            }
        });
        $("#SignOut").click(function () {
            //从本地删除token
            layui.data('tokens', {
                key: 'token',
                remove: true
            });
            window.location = '#admin';

        })
    }
}